<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

    <meta name="keywords" content="keywords" /><!--后期再强化arr和str模式-->
    <meta name="description" content="description" /><!--后期再强化arr和str模式-->
    <meta name="author" content="ltd" />

    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>test本地存储的那点事</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <base target="_black">
    
  </head>
  <body>
    
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <a href="http://localhost/public/test%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E9%82%A3%E7%82%B9%E4%BA%8B.html">转nodejs本地测试</a>
        </div>
        <div class="col-sm-7">
          <p class="">
            虽然cookie、localStorage、sessionStorage十分像是，理解上可以互通，
            但是三者有这比较明显的差异，尤其是cookie，这里将三者实际的分开展示。
          </p>
          <p class="">
            其实很明显cookie是生存于客户端但服务于服务端的，所以操作和检索并没有什么常用库可以使用，也没有使用的必要，但偶尔考虑IE的话，用一两个临时键值也未尝不可
          </p>
          <p>
            localStorage和sessionStorage就非常相似了，有着相同的api:
            <code>setItem(key,value);</code>
            <code>getItem(key);</code>
            <code>removeItem(key);</code>
            <code>clear();</code>
            但客户端的作用域还有少许区别
          </p>
          <div class="text-center">
            <button type="button" class="btn btn-default" onclick="console.log(counter())">计数器测试</button>
          </div>
        </div><!--col-->
        <div class="col-sm-5">
          <iframe src="Storage.html" id="IFLS" width="100%"></iframe>
          <button type="button" class="btn btn-default" onclick="f5iframeWLS('IFLS')">刷新iframe</button>
        </div><!--col-->
        <div class="col-sm-4">
          <form class="form form-horizontal" name="" id="" action="#" method="get" autocomplete="off" enctype="application/x-www-form-urlencoded">
            <h2>cookie</h2>
            <ul>
              <li>4k</li>
              <li>网络环境测试</li>
              <li>设置纯字符串写入，读出要.split("; ")处理</li>
            </ul>
            <div class="form-group">
              <label class="col-sm-3 control-label">name</label>
              <div class="col-sm-9">
                <input type="text" class="input-text form-control" name="_ck_k" value="" placeholder="">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">value</label>
              <div class="col-sm-9">
                <textarea class="textarea form-control" name="_ck_v" id=""></textarea>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">expires</label>
              <div class="col-sm-9">
                <input type="datetime-local" class="input-text form-control" name="_ck_e" value="">
                <p>cookie独有的过期时间设置，但仅setting，浏览器自行判断过期与否</p>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">path</label>
              <div class="col-sm-9">
                <input type="text" class="input-text form-control" name="_ck_p" value="" placeholder="默认当前页面，通常不填">
                <p>cookie独有的path设置，可设置其他页面使用，暂时不理解如何使用与生产环境</p>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12 text-center">
                <button type="button" class="btn btn-default" onclick="ck.pre()">预设</button>
                <button type="button" class="btn btn-default btn-success" onclick="ck.set()">设置</button>
                <button type="button" class="btn btn-default btn-warning" onclick="ck.del()">删除</button>
                <button type="button" class="btn btn-default btn-danger" onclick="ck.cls()">全清</button>
                <button type="button" class="btn btn-default btn-info" onclick="ck.loo()">查询</button>
              </div>
            </div>
          </form>
          <div id="showCookie"></div>
        </div><!--col-->
        <div class="col-sm-4">
          <h2>localStorage
            <small>
              <script type="text/javascript">
                document.write("浏览器"+(!!window.localStorage?"":"不")+"支持")
              </script>
            </small>
          </h2>
          <ul>
            <li>5M</li>
            <li>typeof = string（强制接送=>string）</li>
            <li>隐私模式下面是不可读取（未证）</li>
            <li>同源页面有效，存储内容多，会变卡</li>
            <li>不能被爬虫</li>
          </ul>
          
          <form class="form form-horizontal" name="" id="" action="#" method="get" autocomplete="off" enctype="application/x-www-form-urlencoded">
            <div class="form-group">
              <label class="col-sm-3 control-label">name</label>
              <div class="col-sm-9">
                <input type="text" class="input-text form-control" name="_ls_k" value="" placeholder="">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">value</label>
              <div class="col-sm-9">
                <textarea class="textarea form-control" name="_ls_v" id=""></textarea>
              </div>
            </div>            
            <div class="form-group">
              <div class="col-sm-12 text-center">
                <button type="button" class="btn btn-default" onclick="ls.pre()">预设</button>
                <button type="button" class="btn btn-default btn-success" onclick="ls.set()">设置</button>
                <button type="button" class="btn btn-default btn-warning" onclick="ls.del()">删除</button>
                <button type="button" class="btn btn-default btn-primary" onclick="ls.get()">查询</button>
                <button type="button" class="btn btn-default btn-danger" onclick="ls.cls()">全清</button>
                <button type="button" class="btn btn-default btn-info" onclick="ls.loo()">刷表</button>
              </div>
            </div>
          </form>
          
          <div style="min-height:400px;">
            <table class="table">
              <caption>localStorage</caption>
              <thead>
                <tr>
                  <td>KEY</td>
                  <td>VALUE</td>
                  <td>typeof</td>
                </tr>
              </thead>
              <tbody id="showLS"></tbody>
            </table>
          </div>
          
        </div><!--col-->
        <div class="col-sm-4">
          <h2>sessionStorage
            <small>
              <script type="text/javascript">
                document.write("浏览器"+(!!window.sessionStorage?"":"不")+"支持")
              </script>
            </small>
          </h2>
          <ul>
            <li>容量未测</li>
            <li>typeof = 未测</li>
            <li>会话结束则清空</li>
          </ul>
          <form class="form form-horizontal" name="" id="" action="#" method="get" autocomplete="off" enctype="application/x-www-form-urlencoded">
            <div class="form-group">
              <label class="col-sm-3 control-label">name</label>
              <div class="col-sm-9">
                <input type="text" class="input-text form-control" name="_ss_k" value="" placeholder="">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">value</label>
              <div class="col-sm-9">
                <textarea class="textarea form-control" name="_ss_v" id=""></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12 text-center">
                <button type="button" class="btn btn-default" onclick="ss.pre()">预设</button>
                <button type="button" class="btn btn-default btn-success" onclick="ss.set()">设置</button>
                <button type="button" class="btn btn-default btn-warning" onclick="ss.del()">删除</button>
                <button type="button" class="btn btn-default btn-primary" onclick="ss.get()">查询</button>
                <button type="button" class="btn btn-default btn-danger" onclick="ss.cls()">全清</button>
                <button type="button" class="btn btn-default btn-info" onclick="ss.loo()">刷表</button>
              </div>
            </div>
          </form>
          <div style="min-height:400px;">
            <table class="table">
              <caption>sessionStorage</caption>
              <thead>
                <tr>
                  <td>KEY</td>
                  <td>VALUE</td>
                  <td>typeof</td>
                </tr>
              </thead>
              <tbody id="showSS"></tbody>
            </table>
          </div>
        </div><!--col-->
        
      </div><!--row--->
    </div><!--container-->
  </body>
<script type="text/javascript">
function f5iframeWLS(id){
  var _body = window.parent;
  var _iframeWLS=_body.document.getElementById(id);
  _iframeWLS.contentWindow.location.reload(true);
  return false;
}
function getRadioResult(name){
  var radios = document.getElementsByName(name);
  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      return(radios[i].value);
    }
  }
}//获取radio的值，接受radio的name，返回被选的radio的value
//上面的这可能用不上，留给后面的时候用。


var counter = (function(){
  var n = 0;
  return function(){
    return(++n);
  }
})();//闭包计数器，回头研究

Date.prototype.format = function(str){
  function zerofill(n){return n<10?('0'+n):(n.toString());};
  var yyyy = this.getFullYear().toString();
  var MM = zerofill(this.getMonth()+1);
  var dd = zerofill(this.getDate());
  var HH = zerofill(this.getHours());
  var mm = zerofill(this.getMinutes());
  var ss = zerofill(this.getSeconds());
  console.log([yyyy,MM,dd,HH,mm,ss])
  if(str=='DatetimeLocal'){
    return yyyy+'-'+MM+'-'+dd+'T'+HH+':'+mm;
  }
}//Date格式化DIY简版

var CK = function(){
  this._kDom = document.getElementsByName('_ck_k')[0];
  this._vDom = document.getElementsByName('_ck_v')[0];
  this._eDom = document.getElementsByName('_ck_e')[0];
  this._pDom = document.getElementsByName('_ck_p')[0];
  return this;
}
CK.prototype = {
  init:function(){}
  ,pre:function(){
    this._kDom.value = 'TCKKey';
    this._vDom.value = 'RCK_'+Math.floor(Math.random()*1000);
    this._eDom.value = new Date( new Date().getTime() + 1000*60*5 ).format('DatetimeLocal');
    return this;
  }
  ,set:function(){
    var _k = this._kDom.value;if(_k==''){return;}
    var _v = this._vDom.value;if(_v==''){return;}
    var _e;
    if(_e==''){
      _e = new Date( new Date().getTime() + 1000*60*5 ).toGMTString();//expires使用toGMTString()格式
    }else{
      _e = new Date(this._eDom.value).toGMTString();
    }
    var _p = this._pDom.value;
    //这里是重点
    document.cookie = _k+'='+_v+'; expires='+_e+';'+_p;
    console.log(document.cookie)
  }
  ,del:function(_k){
    if(_k==undefined){_k = this._kDom.value;}
    if(_k==''){return;}
    var _e = 'Thu, 01 Jan 1970 00:00:00 GMT';
    var _p = '';
    document.cookie = _k+'='+'; expires='+_e+';'+_p;
  }
  ,cls:function(){
    var _self = this;
    var arrCookie = document.cookie.split("; ");
    for(var i = 0; i < arrCookie.length; i++){
      var key = arrCookie[i].split("=")[0];
      _self.del(key)
    }
  }//清空方面尚有不足
  ,loo:function(){
    var dom = document.getElementById('showCookie');
    var arrCookie = document.cookie.split("; ");
    var html = dom.innerHTML;
    html += '点击测试'+counter()+'<br>';
    for(var i = 0; i < arrCookie.length; i++){
      var key = arrCookie[i].split("=")[0];
      var val = arrCookie[i].split("=")[1];
      html += '&#13;'+'<b>'+key+'</b><i>'+val+'</i><br>'
    }
    dom.innerHTML = html;
  }
}
var ck = new CK()
var LS = function(){
  this._kDom = document.getElementsByName('_ls_k')[0];
  this._vDom = document.getElementsByName('_ls_v')[0];
  return this;
}
LS.prototype = {
  pre:function(){
    this._kDom.value = 'TLSKey'+Math.floor(Math.random()*1000);
    this._vDom.value = 'RLS_'+Math.floor(Math.random()*1000);
  }
  ,set:function(){
    var _k = this._kDom.value;if(_k==''){return;}
    var _v = this._vDom.value;if(_v==''){return;}
    // window.localStorage[_k]=_v;
    // eval('window.localStorage.'+_k+'='+_v);
    // 前两者可用，但不推荐；
    window.localStorage.setItem(_k,_v);
  }
  ,get:function(_k){
    if(_k==undefined){_k = this._kDom.value;}
    if(_k==''){return;}
    this._vDom.value = window.localStorage.getItem(_k);
  }
  ,del:function(){
    if(_k==undefined){_k = this._kDom.value;}
    if(_k==''){return;}
    window.localStorage.removeItem(_k);
  }
  ,cls:function(){
    window.localStorage.clear();
  }
  ,loo:function(){
    var wls = window.localStorage;
    var table = '';
    for(var k in wls){
      if (wls.hasOwnProperty(k)){
        table += '<tr><td>'+k+'</td><td>'+wls[k]+'</td><td>'+typeof wls[k]+'</td></tr>';
      }
    }
    document.getElementById('showLS').innerHTML = table;
  }
}
var ls = new LS();
var SS = function(){
  this._kDom = document.getElementsByName('_ss_k')[0];
  this._vDom = document.getElementsByName('_ss_v')[0];
  return this;
}
SS.prototype = {
  pre:function(){
    this._kDom.value = 'TSSKey'+Math.floor(Math.random()*1000);
    this._vDom.value = 'RSS_'+Math.floor(Math.random()*1000);
  }
  ,set:function(){
    var _k = this._kDom.value;if(_k==''){return;}
    var _v = this._vDom.value;if(_v==''){return;}
    // 想来和ls一样可以多种设置，但这里只试用这一种
    window.sessionStorage.setItem(_k,_v);
  }
  ,get:function(_k){
    if(_k==undefined){_k = this._kDom.value;}
    if(_k==''){return;}
    this._vDom.value = window.sessionStorage.getItem(_k);
  }
  ,del:function(){
    if(_k==undefined){_k = this._kDom.value;}
    if(_k==''){return;}
    window.sessionStorage.removeItem(_k);
  }
  ,cls:function(){
    window.sessionStorage.clear();
  }
  ,loo:function(){
    var wss = window.sessionStorage;
    var table = '';
    for(var k in wss){
      if (wss.hasOwnProperty(k)){
        table += '<tr><td>'+k+'</td><td>'+wss[k]+'</td><td>'+typeof wss[k]+'</td></tr>';
      }
    }
    document.getElementById('showSS').innerHTML = table;
  }
}
var ss = new SS();


</script>

</html>